<template>
<div class="cart-wrap">
  <order-head>
    <template v-slot:tips>
      <div class="clearfix">
        <h2>我的购物车</h2>
        <div class="head-tips">
          温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算
        </div>
      </div>
    </template>
  </order-head>
  <div class="box1">
    <div class="container">
      <div class="item-wrap-box">
        <ul class="car-item-head">
          <li class="co1">
            <span class="checkbox" v-bind:class="{'checked':allChecked}" @click="changeAll"></span>全选
          </li>
          <li class="co3">商品名称</li>
          <li class="co1">单价</li>
          <li class="co2">数量</li>
          <li class="co1">小计</li>
          <li class="co1">操作</li>
        </ul>
        <ul class="car-item-list">
          <li class="car-item" v-for="item in list" :key="item.id">
            <div class="checkbox-wrap">
              <span class="checkbox" v-bind:class="{'checked':item.productSelected}" @click="upDate(item)"></span>
            </div>
            <div class="item-name">
              <img :src="item.productMainImage" alt="">
              <span>{{item.productName + ',' +item.productSubtitle}}</span>
            </div>
            <div class="item-price">
              {{item.productPrice}}
            </div>
            <div class="item-num">
              <div class="num-box">
                <span @click="upDate(item,type='-')">-</span>
                <span>{{item.quantity}}</span>
                <span @click="upDate(item,type='+')">+</span>
              </div>
            </div>
            <div class="item-subtotal">
              {{item.productPrice}}
            </div>
            <div class="item-operation">
              <span @click="deleteIndex(item)"></span>
            </div>
          </li>
        </ul>
      </div>

      <div class="order-wrap">
        <div class="left">
          <a href="/#/index">继续购物</a>    共 <span>{{list.length}}</span>件商品，已选择 <span>{{checkedNum}}</span>件
        </div>
        <div class="right">
          合计：<span>{{cartTotalPrice}}</span>元
          <div class="btn">去结算</div>
        </div>
      </div>
    </div>
  </div>

  <service-bar/>
  <nav-footer/>
</div>
</template>

<script>
import OrderHead from "../components/orderHead/OrderHead";
import ServiceBar from "../components/ServiceBar/servicebar";
import NavFooter from "../components/NavFooter/navfooter";
export default {
name: "cart",
  data(){
    return{
      list:[],//商品列表
      allChecked:false,//是否全选
      cartTotalPrice:0,//商品总金额
      checkedNum:0//选中商品数量
    }
  },
  components:{
    OrderHead,
    ServiceBar,
    NavFooter
  },
  methods:{
    getCars(){
      this.axios.get('/carts').then(res=>{
        this.renderData(res)
      })
    },
    changeAll(){
      let url = this.allChecked?'/carts/unSelectAll':'/carts/selectAll';
      this.axios.put(url).then(res=>{
        this.renderData(res)
      })
    },
    upDate(item,type){
      let quantity = item.quantity,
          selected = item.productSelected;
      if(type == '-'){
        quantity ===1? this.$message.warning('商品至少保留一件') : --quantity;
      }else if(type == '+'){
        quantity > item.productStock?this.$message.warning('购买数量不能超过库存数量'):++quantity;
      }else{
        selected = !item.productSelected;
      }
      this.axios.put(`/carts/${item.productId}`,{
        quantity,
        selected,
      }).then(res=>{
        this.renderData(res)
      })
    },
    renderData(res){
      this.list= res.cartProductVoList || [];
      this.allChecked = res.selectedAll;
      this.cartTotalPrice = res.cartTotalPrice;
      this.checkedNum = this.list.filter(item=>item.productSelected).length;
    },
    deleteIndex(item){
      this.axios.delete(`/carts/${item.productId}`).then(res=>{
        this.renderData(res)
      })
    }
  },
  created() {
    this.getCars()
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/scss/config.scss";
@import "../assets/scss/base.scss";
@import "../assets/scss/mixin.scss";
@import "../assets/scss/button.scss";
.cart-wrap{
  .box1{
    background-color: #F5F5F5;
    padding-top:30px;
    padding-bottom:114px;
    .item-wrap-box{
      background-color: #ffffff;
      font-size: 14px;
      color: #999999;
      .checkbox{
        display: inline-block;
        width: 22px;
        height: 22px;
        border: 1px solid #E5E5E5;
        vertical-align: middle;
        margin-right: 17px;
        cursor:pointer;
        &.checked{
          background:url('/imgs/icon-gou.png') #FF6600 no-repeat center;
          background-size:16px 12px;
          border:none;
        }
      }
      .car-item-head{
        display: flex;
        height: 76px;
        line-height: 76px;
        padding:0 15px;
        box-sizing: border-box;
        .co1{
          flex: 1;
          .el-checkbox{
            font-size: 16px;
          }
        }
        .co2{
          flex: 2;
          text-align: center;
        }
        .co3{
          flex: 3;
        }
      }
      .car-item-list{
        li{
          padding:0 15px;
          box-sizing: border-box;
        }
        .car-item{
          display: flex;
          align-items: center;
          height: 125px;
          font-size: 16px;
          color: #333333;
          border-top: 1px solid #e5e5e5;
          .checkbox-wrap{
            flex: 1;
          }
          .item-name{
            flex: 3;
            display: flex;
            font-size: 12px;
            font-weight: bold;
            color: #333333;
            img{
              width: 80px;
              height: 80px;
              vertical-align: middle;
            }
            span{
              margin-left: 15px;
              line-height: 80px;
            }
          }
          .item-price{
            flex: 1;
          }
          .item-num{
            flex: 2;
            .num-box{
              margin:0 auto;
              width: 150px;
              height: 40px;
              line-height: 40px;
              border: 1px solid #e5e5e5;
              span{
                display: inline-block;
                width: 50px;
                text-align: center;
                cursor: pointer;
              }
            }
          }
          .item-subtotal{
            flex: 1;
            color: #FF6600;
          }
          .item-operation{
            flex: 1;
            span{
              display: inline-block;
              width: 22px;
              height: 22px;
              cursor: pointer;
              @include bgImg(22px,22px,'/imgs/icon-close.png')
            }
          }
        }
      }
    }
    .order-wrap{
      @include flex();
      margin-top: 20px;
      font-size: 14px;
      color: #666666;
      .left{
        a{
          cursor: pointer;
          margin-right: 15px;
          color: #666666;
        }
        span{
          margin:0 2px;
          color: #FF6600;
        }
      }
      .right{
        span{
          color: #FF6600;
          font-size: 22px;
          margin: 0 2px;
        }
        .btn{
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
